<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <style>
        div{
            margin-top: 20px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s ease-in-out ;
            margin-left: auto;
            margin-right: auto;
            
        }
        .box:hover{
            transform:rotate(50deg);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s ease-in-out ;
            margin-left: auto;
            margin-right: auto;
        }
        .box2:hover{
            transform: translate(100px,200px);
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s ease-in-out ;
            margin-left: auto;
            margin-right: auto;
        }
        .box3:hover{
            transform: skewx(30deg);
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s ease-in-out ;
            margin-left: auto;
            margin-right: auto;
        }
        .box4:hover{
            transform: scale(1.2,0.8);
        }
        .box5{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 2s ease-in-out ;
            margin-left: auto;
            margin-right: auto;
        }
        .box5:hover{
            transform: rotateY(130deg) rotateZ(130deg);
            
        }
        .box6{
            width: 1000px;
            height: 500px;
            background: gray;
        }
        .qiu{
            height: 50px;
            width: 50px;
            border: 1px solid ;
            background-color: aquamarine;
            border-radius: 50%;
        }
        @keyframes yundong {
            0%{
                color: red;
            }

            25%{
                transform: translate(200px,200px)
                  scale(1.5,1.5);
            }
            50%{
                transform: translate(500px,500px)
                 scale(0.8,0.8) ;
            }
            75%{
                transform:  translate(700px, 100px
                )  scale(1.6,1.6);
            }   
            100%{
                transform: translate(1000px, 500px)
                 scale(1.8,1.8);
            }
        }
        .box6:hover .qiu{
            animation: yundong 4s linear 0s infinite;
        }
        .kj{
            width: 400px;
            height: 400px;
            background-color: bisque;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
            position: relative;
        }
        .ll{
            width: 200px;
            height: 200px;
            margin: auto;
            left: 100px;
            top: 100px;
            position: absolute;
           
           animation: xuanzhuan 7s linear infinite;
           transform-style: preserve-3d;
        }
        .mian{
            width: 100%;
            height: 100%;
            opacity: 0.8;
            
            position: absolute;
        }
        .left{
             transform: rotateY(90deg)
               translateZ(-100px);
             background-color: brown;
        }
        .right{
              transform: rotateY(90deg) 
              translateZ(100px);
              background-color: red;
        }
        .top{
             transform: rotateX(90deg)
               translatez(100px);

             background-color: yellowgreen;
        }
        .bottom{
            transform: rotateX(90deg)
             translateZ(-100px);
             background-color: cadetblue;
          
        }
        .back{
            transform: translatez(-100px);
            background-color: blue;
        }
        .front{
            transform:  translateZ(100px);
            background-color: cornflowerblue;
        }
        @keyframes xuanzhuan {
            0%{
                transform: rotateX(0)
                 rotateY(0);
            }
            100%{
                transform: rotateX(360deg)
                 rotateY(360deg);
        }
        }
    </style>

<body>
    <div class="box"></div>
    <div class="box2"> </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>



    <div class="box6">

        <div class="qiu"></div>

    </div>
    <div class="kj">

        <div class="ll">

            <div class=" left mian"></div>
            <div class="right mian"></div>
            <div class=" front mian"></div>
            <div class=" back mian"></div>
            <div class=" bottom mian"></div>
            <div class=" top mian"></div>
            

        </div>

    </div>
</body>
</html>